<template>
  <!-- 系统用户 表单页面 -->
  <div v-if="crud.status.cu > 0">
    <el-drawer
      :title="crud.status.title"
      :visible.sync="crud.status.cu > 0"
      direction="rtl"
      :before-close="crud.cancelCU"
      :wrapper-closable="false"
      size="400px"
    >
      <div class="leisure-drawer__content">

        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="100px"
        >
          <el-tabs type="card">
            <el-tab-pane label="基础信息">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名" clearable />
              </el-form-item>

              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" clearable />
              </el-form-item>

              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入手机号" clearable />
              </el-form-item>

              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱" clearable />
              </el-form-item>

              <el-form-item label="姓名/昵称" prop="nickname">
                <el-input v-model="form.nickname" placeholder="请输入姓名/昵称" clearable />
              </el-form-item>

              <!-- 创建类型 1：后台添加 ，0: 用户注册 -->
              <el-form-item label="创建类型" prop="createType">
                <!-- 智能推断为字典类型, 字典类型为 dict.sys_user_create_type -->
                <el-select
                  v-model="form.createType"
                  clearable
                  placeholder="请选择创建类型 1：后台添加 ，0: 用户注册"
                  style="width: 100%"
                  :disabled="true"
                >
                  <el-option
                    v-for="createType in dict.sys_user_create_type"
                    :key="createType.key"
                    :label="createType.value"
                    :value="Number(createType.key)"
                  />
                </el-select>
                <!-- <el-input v-model="form.createType" placeholder="请输入创建类型 1：后台添加 ，0: 用户注册" clearable /> -->
              </el-form-item>
              <!--

              <el-form-item label="默认组织id" prop="defDepid">
                <el-input v-model="form.defDepid" placeholder="请输入默认组织id" clearable />
              </el-form-item>
              -->

              <!-- 状态 0 创建，注册；2：待完善信息 ；4：待补充调整信息  8：正常 16：账户冻结 -->
              <!-- 状态值 -->
              <el-form-item label="状态" prop="status">
                <!-- 代码生成器生成的 默认从通用字典 common_status 里取值，其他情况，请手动修改-->
                <el-radio-group v-for="s in dict.sys_user_status" :key="s.key" v-model="form.status">
                  <el-radio :label="Number(s.key)">{{ s.value }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-tab-pane>
            <!-- 扩展信息-->
            <el-tab-pane label="详细信息">
              <userInfoForm :user-info="form.userInfo" />
            </el-tab-pane>
          </el-tabs>

        </el-form>
        <div class="leisure-drawer__footer">
          <el-button
            @click="crud.cancelCU"
          >
            取消
          </el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import CRUD, { form } from '@crud/crud'
import UserInfoForm, { userInfoForm } from './UserInfo/form'
// 系统用户 - model
const defaultForm = {
  id: null, // id
  username: null, // 用户名
  password: null, // 密码
  mobile: null, // 手机号
  email: null, // 邮箱
  nickname: null, // 显示的名字
  createType: 1, // 创建类型 1：后台添加 ，0: 用户注册
  defDepid: null, // 默认组织id
  lastLogin: null, // 最后登录时间
  lastIp: null, // 最后一次登录ip
  lastIpDes: null, // 最后一次登录ip地址描述
  status: 1,
  lockVersion: 0,
  createUser: null,
  userInfo: userInfoForm
}
export default {
  name: 'UserForm',
  components: {
    UserInfoForm
  },
  mixins: [form(defaultForm)],
  dicts: [
    'sys_user_create_type',
    'sys_user_status'
  ], // 字典
  data() {
    return {
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        createType: [
          { required: true, message: '请选择创建类型', trigger: 'blur', type: 'number' }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    [CRUD.HOOK.afterToCU](crud, form) {
      if (!form.userInfo) {
        this.form.userInfo = userInfoForm
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }

</style>
